{% extends "app/base_site.html" %}

{% block title %} 业务算法管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
<style>
    .xc_flow-container {
        /*background: #f5f7fa;*/
    }
    
    .xc_modern-card {
        background: white;
        border-radius: 6px;
        padding: 10px 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        margin-bottom: 12px;
    }
    
    .xc_page-header {
        display: flex;
        justify-content: flex-start !important;
        align-items: center;
        padding: 4px 0;
        margin-bottom: 8px;
        min-height: 32px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .xc_page-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        flex-shrink: 0;
    }
    
    .xc_page-title i {
        margin-right: 6px;
        font-size: 16px;
        color: #3b82f6;
    }
    
    .xc_search-box {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .xc_loading-spinner {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid #3b82f6;
        border-radius: 50%;
        animation: xc_spin 1s linear infinite;
        margin-right: 5px;
    }
    
    @keyframes xc_spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .xc_loading-text {
        color: #6b7280;
        font-size: 12px;
    }
    
    .xc_header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .xc_header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .xc_btn-modern {
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 400;
        border-radius: 3px;
        border: 1px solid #d1d5db;
        background: white;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        text-decoration: none;
    }
    
    .xc_btn-modern:hover {
        background: #f9fafb;
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_btn-secondary {
        background: white;
        color: #6b7280;
        border: 1px solid #d1d5db;
    }
    
    .xc_btn-secondary:hover {
        background: #f9fafb;
        color: #374151;
        border-color: #9ca3af;
    }

    .xc_table-container {
        overflow-x: auto;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }
    
    .xc_table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    
    .xc_table-header {
        background: #fafafa;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .xc_table-header th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 500;
        color: #374151;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .xc_table-body tr {
        border-bottom: 1px solid #e5e7eb;
        transition: background 0.15s;
    }
    
    .xc_table-body tr:nth-child(even) {
        background: #fafbfc;
    }
    
    .xc_table-body tr:last-child {
        border-bottom: none;
    }
    
    .xc_table-body tr:hover {
        background: #f3f4f6 !important;
    }
    
    .xc_table-body td {
        padding: 10px 12px;
        color: #374151;
        vertical-align: middle;
        line-height: 1.5;
    }
    .xc_actions {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .xc_btn-icon {
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 3px;
        border: 1px solid #d1d5db;
        background: white;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .xc_btn-icon i {
        font-size: 10px;
    }
    
    .xc_btn-icon:hover {
        background: #f9fafb;
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_btn-icon.delete:hover {
        background: #fef2f2;
        border-color: #ef4444;
        color: #ef4444;
    }
    
    .xc_pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0;
        background: white;
        border-radius: 6px;
    }
    
    .xc_page-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d1d5db;
        background: white;
        color: #6b7280;
        border-radius: 5px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
        text-decoration: none;
    }
    
    .xc_page-btn:hover:not(.active) {
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_page-btn.active {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .xc_page-info {
        font-size: 13px;
        color: #9ca3af;
        margin: 0 8px;
    }
    
    .xc_empty-state {
        text-align: center;
        padding: 80px 20px;
        color: #9ca3af;
    }
    
    .xc_empty-state i {
        font-size: 64px;
        color: #d1d5db;
        margin-bottom: 16px;
    }
    
    .xc_empty-state p {
        font-size: 14px;
        margin: 0;
    }
    
    /* 算法名称高亮样式 */
    .xc_algorithm-name {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .xc_algorithm-name::before {
        content: '';
        width: 3px;
        height: 14px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border-radius: 2px;
        display: inline-block;
    }
    
    .xc_algorithm-code {
        font-size: 11px;
        color: #6b7280;
        font-family: 'Courier New', monospace;
        background: #f3f4f6;
        padding: 2px 6px;
        border-radius: 3px;
        display: inline-block;
    }
    
    .xc_mode-badge {
        display: inline-block;
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 12px;
        font-weight: 500;
        background: #dbeafe;
        color: #1e40af;
    }
    
    .xc_id-badge {
        display: inline-block;
        min-width: 32px;
        text-align: center;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
        background: #f9fafb;
        border-radius: 4px;
    }
    
    /* 搜索框样式 */
    .xc_search-box {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .xc_search-input {
        width: 200px;
        height: 30px;
        padding: 0 10px;
        margin-bottom: 5px;
        font-size: 12px;
        border: 1px solid #d1d5db;
        border-radius: 3px;
        transition: border-color 0.2s;
        line-height: 1;
        box-sizing: border-box;
    }
    
    .xc_search-input:focus {
        border-color: #3b82f6;
        outline: none;
    }
    
    .xc_search-input::placeholder {
        color: #9ca3af;
    }

    .right_col {
        background: #f5f7fa !important;
    }
    
    @media (max-width: 1200px) {
        .xc_btn-modern {
            padding: 3px 8px;
            font-size: 11px;
        }
    }
    
    @media (max-width: 768px) {
        .xc_page-header {
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .xc_header-right {
            width: 100%;
            justify-content: flex-start;
        }
        
        .xc_table-container {
            overflow-x: scroll;
        }
    }
</style>
{% endblock stylesheets %}

{% block content %}
<div class="right_col" role="main">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <!-- xc page start -->
                <div class="xc_flow-container">
                    <div class="xc_modern-card">
                        <div class="xc_page-header">
                            <div class="xc_page-title">
                                <i class="fa fa-sitemap"></i>
                                业务算法管理
                            </div>
                            <div class="xc_search-box">
                                <input type="text" id="searchInput" class="xc_search-input" placeholder="输入算法名称或编号" value="{{ search_key }}">
                                <button class="xc_btn-modern xc_btn-secondary" onclick="doSearch()">
                                    <i class="fa fa-search"></i> 搜索
                                </button>
                                <button class="xc_btn-modern xc_btn-secondary" onclick="resetSearch()" {% if not search_key %}style="display:none;"{% endif %} id="resetBtn">
                                    <i class="fa fa-times"></i> 重置
                                </button>
                            </div>
                            <div class="xc_header-actions">
                                <button class="xc_btn-modern xc_btn-secondary" onclick="openAddFlowModal()">
                                    <i class="fa fa-plus"></i> 添加
                                </button>
                                <button class="xc_btn-modern xc_btn-secondary" data-toggle="modal" data-target="#ImportFileDialog">
                                    <i class="fa fa-download"></i> 导入
                                </button>
                                <button class="xc_btn-modern xc_btn-secondary" onclick="window.location.reload()">
                                    <i class="fa fa-refresh"></i> 刷新
                                </button>
                            </div>
                            <div>
                                <span id="top_loading" style="display: none;">
                                    <span class="xc_loading-spinner"></span>
                                    <span class="xc_loading-text">加载中...</span>
                                </span>
                                <span id="top_msg">{{top_msg}}</span>
                            </div>
                        </div>

                        <div class="xc_table-container">
                            <table class="xc_table">
                                <thead class="xc_table-header">
                                    <tr>
                                        <th>ID</th>
                                        <th>算法编号</th>
                                        <th>算法名称</th>
                                        <th>算法模式</th>
                                        <th>分析进程</th>
                                        <th>最大实例数</th>
                                        <th>更新时间</th>
                                        <th style="text-align: center;">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="xc_table-body">
                                    {%  for d  in data %}
                                    <tr>
                                        <td><span class="xc_id-badge">{{ d.id }}</span></td>
                                        <td><span class="xc_algorithm-code">{{ d.code }}</span></td>
                                        <td><span class="xc_algorithm-name">{{ d.name }}</span></td>
                                        <td>
                                            <span class="xc_mode-badge">{{ d.mode_name }}</span>
                                        </td>
                                        <td>{{ d.deploy_process_index }}</td>
                                        <td>{{ d.max_concurrency }}</td>
                                        <td>{{ d.last_update_time }}</td>
                                        <td>
                                            <div class="xc_actions">
                                                <button onclick="f_edit('{{ d.code }}')" class="xc_btn-icon">
                                                    <i class="fa fa-edit"></i> 编辑
                                                </button>
                                                <button onclick="f_openExport('{{ d.code }}')" class="xc_btn-icon">
                                                    <i class="fa fa-share"></i> 导出
                                                </button>
                                                <button onclick="f_openDel('{{ d.code }}')" class="xc_btn-icon delete">
                                                    <i class="fa fa-trash"></i> 删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            
                            {% if data|length == 0 %}
                            <div class="xc_empty-state">
                                <i class="fa fa-sitemap"></i>
                                <p>暂无业务算法数据</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="xc_pagination">
                        <span class="xc_page-info">共 {{ pageData.page_num }} 页 / {{ pageData.count }} 条</span>
                        {%  for d  in pageData.pageLabels%}
                          {% if d.cur == 1 %}
                            <div class="xc_page-btn active">{{ d.name }}</div>
                          {% else %}
                            <a href="/algorithmFlow/index?p={{d.page}}&ps={{pageData.page_size}}{% if search_key %}&search={{search_key}}{% endif %}" class="xc_page-btn">{{ d.name }}</a>
                          {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <!-- xc page end -->
            </div>
        </div>
    </div>

    <!--导入业务算法弹窗start -->
    <div id="ImportFileDialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" >导入业务算法</h4>
          </div>
          <div class="modal-body">
            <div style="padding: 5px 20px;">
              <form class="form-horizontal calender" role="form">

                <div class="form-group">
                  <label class="col-sm-3 control-label">导入文件</label>
                  <div class="col-sm-9">
                    <input type="file" class="form-control" accept=".xcflow" name="file"  >
                  </div>
                </div>
                  <!--
                <div class="form-group">
                  <label class="col-sm-3 control-label">导入备注</label>
                  <div class="col-sm-9">
                    <textarea class="form-control" style="height:55px;" name="import_remark"></textarea>
                  </div>
                </div>
                  -->
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" onclick="f_openImport()" class="btn btn-dark">提交</button>
          </div>
        </div>
      </div>
    </div>
    <!--导入业务算法弹窗end -->
    
    <!-- 引入添加/编辑弹窗模板 -->
    {% include 'app/algorithmFlow/modal_form.html' %}
    
</div>


{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  
<!-- 引入弹窗管理脚本 -->
<script src="/static/app/algorithmFlow/modal_form.js"></script>

<script>
    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");
    let eleFile = $("input[name='file']");
    let eleSearchInput = $("#searchInput");
    let eleResetBtn = $("#resetBtn");
    //let eleTextareaImportRemark= $("textarea[name='import_remark']");
    
    // 搜索功能
    function doSearch() {
        const searchKey = eleSearchInput.val().trim();
        if (searchKey) {
            window.location.href = '/algorithmFlow/index?search=' + encodeURIComponent(searchKey);
        } else {
            myToast2025('请输入搜索关键词', 'warning');
        }
    }
    
    // 重置搜索
    function resetSearch() {
        window.location.href = '/algorithmFlow/index';
    }
    
    // 支持回车搜索
    eleSearchInput.on('keypress', function(e) {
        if (e.which === 13) {
            doSearch();
        }
    });
    
    // 搜索框变化时显示/隐藏重置按钮
    eleSearchInput.on('input', function() {
        if ($(this).val().trim()) {
            eleResetBtn.show();
        } else {
            eleResetBtn.hide();
        }
    });

    function f_openDel(code){
        ele_top_loading.show();
        $.ajax({
               url: '/algorithmFlow/openDel',
               type: "post",
               async: true,
               data: {"code":code},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                      ele_top_loading.hide();
                   if(1000 === res.code){
                        window.location.reload();
                   }else{
                        myToast2025(res.msg,"error");
                   }
               }
            });

    }
    function f_edit(code) {
        openEditFlowModal(code);
    }
    function f_openExport(code) {
        //导出业务算法
        ele_top_loading.show();
        $.ajax({
           url: "/algorithmFlow/openExport",
           type: "post",
           async: true,
           data: {"code":code},
           dataType: "json",
           timeout: 0,
           error: function () {
               ele_top_loading.hide();
               myToast2025("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               ele_top_loading.hide();
               if(res.code === 1000){
                    let info = res.info;
                    let export_filename = info["export_filename"]
                    let download_url = "/storage/openDownload?filename="+export_filename;
                    window.open(download_url);
               }else{
                    myToast2025(res.msg,"error");
               }
           }
        });

    }
    function f_openImport() {
        //导入业务算法
        if (eleFile[0].files.length > 0){
          let file = eleFile[0].files[0];
           //let importRemark = eleTextareaImportRemark.val().trim();

          let fs_name = file.name;
          let fs_size = file.size;//文件字节大小
          let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

          if (fs_size_m <= 200){
                let formData = new FormData();
                formData.append('file',file)
                //formData.append('importRemark',importRemark)

                $.ajax({
                  url:'/algorithmFlow/openImport',
                  type:'post',
                  async: true,
                  contentType:false,
                  processData:false,
                  data:formData,
                  dataType: "json",
                  timeout: 0,
                  error: function () {
                    myToast2025("网络异常，请确定网络正常！","error");
                  },
                  success: function (res) {
                    if (1000 === res.code) {
                        myToast2025(res.msg,"success");
                        // data-toggle="modal" data-target="#ImportFileDialog"
                        //$("#ImportFileDialog").modal("show");
                        $("#ImportFileDialog").modal("hide");
                          myToast2025(res.msg,"success",1000);
                           setTimeout(function () {
                              window.location.reload();
                           }, 1000);

                    }else{
                        myToast2025(res.msg,"error");
                    }
                  }
                });
          }else{
               myToast2025("上传文件大小不能超过200M！","error");
          }
        }else{
            myToast2025("未选择上传文件！","error");
        }
        return false;
    }
</script>

{% endblock javascripts %}

